<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>inis 系统 安装引导</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta content="A fully featured admin theme which can be used to build CRM, CMS, etc." name="description" />
        <meta content="Coderthemes" name="author" />
        
        <link rel="shortcut icon" href="index/assets/images/logo-2.png">
        <link href="index/assets/css/icons.min.css" rel="stylesheet" type="text/css" />
        <link href="index/assets/css/app.min.css" rel="stylesheet" type="text/css" />
        
        <script src="index/assets/libs/vue3.js"></script>
        <script src="index/assets/libs/axios.min.js"></script>
        <script src="index/assets/js/utils/helper.js"></script>
    </head>

    <body data-layout="topnav" class="boxed-layout">
        
        <div id="check" class="wrapper">
            
            <div class="content-page">
                <div class="content">
                    
                    <div class="container-fluid">
                        
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box">
                                    <h4 class="page-title">安装前校验</h4>
                                </div>
                            </div>
                        </div>    
                        
                        <div class="row justify-content-center">
                            <div class="col-lg-7 col-md-10 col-sm-11">
                                
                                <div class="horizontal-steps mt-4 mb-4 pb-5">
                                    <div class="horizontal-steps-content">
                                        <div class="step-item">
                                            <span data-toggle="tooltip" data-placement="bottom" title="" data-original-title="ThinkPHP 6 规范配置">安装前准备</span>
                                        </div>
                                        <div class="step-item current">
                                            <span data-toggle="tooltip" data-placement="bottom" title="" data-original-title="校验PHP和数据库版本">安装前校验</span>
                                        </div>
                                        <div class="step-item">
                                            <span>开始安装</span>
                                        </div>
                                        <div class="step-item">
                                            <span>完成</span>
                                        </div>
                                    </div>
                                    
                                    <div class="process-line" style="width: 33%;"></div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="header-title mb-3">数据库配置</h4>
                                        <div class="form-row">
                                            <div class="form-group col-md-8">
                                                <label>地址</label>
                                                <input v-model="sql.HOSTNAME" type="text" class="form-control" placeholder="如：localhost 或 127.0.0.1">
                                                <small class="form-text text-muted">如果是外网数据库，请确认端口安全组中的出入方向是否已经开启</small>
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label>端口号</label>
                                                <input v-model="sql.HOSTPORT" type="text" class="form-control" placeholder="如：3306">
                                            </div>
                                            <div class="form-group col-md-4">
                                                <label>数据库前缀</label>
                                                <input value="inis_" type="text" class="form-control" placeholder disabled>
                                            </div>
                                            <div class="form-group col-md-8">
                                                <label>数据库名</label>
                                                <input v-model="sql.DATABASE" type="text" class="form-control" placeholder>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label>用户名</label>
                                                <input v-model="sql.USERNAME" type="text" class="form-control" placeholder>
                                            </div>
                                            <div class="form-group col-md-12">
                                                <label>密码</label>
                                                <input v-model="sql.PASSWORD" type="text" class="form-control" placeholder>
                                            </div>
                                        </div>
                                        <div class="float-left">
                                            <span class="text-primary">PS：请在配置数据库信息后点击提交配置再下一步</span>
                                        </div>
                                        <div class="float-right">
                                            <button v-on:click="env" type="button" class="btn btn-danger">提交配置</button>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-lg-4">
                                <div class="card">
                                    <div class="card-body">
                                        
                                        <h4 class="header-title mb-3">环境要求</h4>
                                        
                                        <div class="table-responsive">
                                            <table class="table table-centered mb-0">
                                                <thead>
                                                <tr>
                                                    <th>依赖</th>
                                                    <th>当前版本</th>
                                                    <th>状态</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr>
                                                    <td>
                                                        <span class="badge badge-primary-lighten">PHP</span>&nbsp;
                                                        <span class="badge badge-info-lighten">>=</span>&nbsp;
                                                        <span class="badge badge-primary-lighten">7.2.5</span>
                                                    </td>
                                                    <td>{{ php.version }}</td>
                                                    <td>
                                                        <span v-if="php.check" v-html="ico.success"></span>
                                                        <span v-else-if="!php.check" v-html="ico.error"></span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <span class="badge badge-primary-lighten">MySQL</span>&nbsp;
                                                        <span class="badge badge-info-lighten">>=</span>&nbsp;
                                                        <span class="badge badge-primary-lighten">5.7</span>
                                                    </td>
                                                    <td>
                                                        <span v-if="!deploy">{{ MySQL.version || '等待配置' }}</span>
                                                        <span v-else-if="deploy" style="display: flex; align-items: center;"><span class="spinner-border text-light m-2" style="width:1.5em; height:1.5em;"></span>配置中 ...</span>
                                                    </td>
                                                    <td>
                                                        <span v-if="MySQL.check" v-html="ico.success"></span>
                                                        <span v-else-if="!MySQL.check" v-html="ico.error"></span>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        
                                        <button v-on:click="next" :disabled="!libs_check" type="button" class="btn btn-block btn-primary">下一步</button>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <footer class="footer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <?= date('Y'); ?> © inis - <a href="//inis.cc" class="text-muted" target="_blank">inis.cc</a>
                            </div>
                            <div class="col-md-6">
                                <div class="text-md-right footer-links d-none d-md-block">
                                    <a href="//inis.cc" class="text-muted" target="_blank">inis</a>
                                    <a href="javascript: void(0);">version {{ inis_version }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
                
            </div>
        </div>
        
        <script src="index/assets/js/app.min.js"></script>
        <script src="index/assets/js/install/check.js"></script>
    </body>
</html>
